<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
</head>
<body>
<div class="page">
    <header class="mui-bar mui-bar-nav">
        <h1 class="title">刷词条件</h1>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item active" href="#">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item" href="/unit_list">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item" href="/add_word_page">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>
    <div class="content">
        <br/>
        <br/>
        <div class="mui-card">
            <h5 class="mui-content-padded">刷词范围</h5>
            <form class="mui-input-group" id="range-form">
                <div class="mui-input-row mui-radio mui-left">
                    <label>全部 <span class="mui-badge mui-badge-success">{{ total_count }}</span></label>
                    <input name="range-type" type="radio" id="total" value="1" checked="">
                </div>
                <div class="mui-input-row mui-radio mui-left">
                    <label>自选 <span class="mui-badge mui-badge-danger">{{ total_unit }}</span> </label>
                    <input name="range-type" type="radio" value="2" id="custom">
                </div>
                <div id="select-unit" hidden>
                    <br/>
                    <h5 class="mui-content-padded">选择章节(可多选)</h5>
                    {% with i=1 %}
                        {% for unit in unit_list %}
                            {% if unit.2 != 0 %}
                                <div class="mui-input-row mui-checkbox mui-left">
                                    <label>{{ unit.1 }} <span
                                            class="mui-badge mui-badge-primary">{{ unit.2 }}</span></label>
                                    <input name="custom-range" type="checkbox" value="{{ unit.0 }}">
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endwith %}
                </div>

            </form>
        </div>

        <div class="mui-card">
            <h5 class="mui-content-padded">刷词顺序</h5>
            <form class="mui-input-group">
                <div class="mui-input-row mui-radio mui-left">
                    <label>顺序</label>
                    <input name="order" type="radio" value="1" checked="">
                </div>
                <div class="mui-input-row mui-radio mui-left">
                    <label>随机</label>
                    <input name="order" type="radio" value="2">
                </div>
            </form>
        </div>
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block" style="margin-left: 10px;width: 95%"
                id="start">开始刷词
        </button>
    </div>

</div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>
    $(function () {
        $("#custom").click(function () {
            $("#select-unit").show();
        });
        $("#total").click(function () {
            $("#select-unit").hide();
        });

        function wrapRequest() {
            let range_type = getRangeType();
            let ranges = "";
            if (range_type === "2") {
                ranges = getRange();
                if (ranges.length === 0) {
                    mui.toast("还没有选择章节");
                    return [];
                }
            }
            console.log("ranges" + ranges);
            let order = getOrder();
            return "?type=" + range_type + "&order=" + order + "&ranges=" + ranges;
        }

        function getRangeType() {
            return $('input:radio[name="range-type"]:checked').val();
        }

        function getRange() {
            let arr = [];
            $('input[type="checkbox"]:checked').each(function (i) {
                arr[i] = $(this).val();
            });
            return arr.join(",");
        }

        function getOrder() {
            return $('input:radio[name="order"]:checked').val();
        }

        function startDictate(request) {
            $.ajax({
                url: '/init_dict' + request,
                type: 'GET',
                success: function () {
                    mui.toast("初始化成功");
                    changeRoute();
                }
            })
        }

        function changeRoute() {
            window.location.href = "/dictate?index=-1&op_type=1";
        }

        $("#start").click(function () {
            let request = wrapRequest();
            console.log(request);
            if (request.length !== 0) {
                console.log("send..........");
                startDictate(request);
            }
        });
    });
</script>
</html>